<template>
	<view>
		<!-- 上方商铺信息 -->
		<view style="background-color: white;margin: 30rpx 30rpx;border-radius: 10rpx;">
			<view style=" display: flex;">
				<image :src="shopImage" style="height: 130rpx; width: 130rpx;margin:30rpx 30rpx 10rpx 30rpx;"></image>
				<view>
					<view style="font-size: 43rpx;margin-top: 15rpx;font-weight: 500;">{{shopName}}</view>
					<view style="color:#cccccc ;font-size: 30rpx;margin-top: 20rpx;">{{shopInfo}}</view>
					
				</view>
			</view>
			<view style="margin-left: 30rpx;">
				<view style="color: #cccccc; ">地址:{{shopAddress}}</view>
				<view style="color: #cccccc; ">手机号:{{shopPhone}}</view>
				
				<view style="margin: 10rpx 0rpx;text-align: right;display: flex;">
					<view style="color: #cccccc;font-size: 21rpx;float: left;margin-top: auto;">菜品管理以及修改店铺信息请点右侧按钮-></view>
					<button @click="openShopDetail()" size="mini" style="background-color: #f0cc00;font-size: 39rpx;">管理</button>
				</view>
				
			</view>
			
		</view>
		<!-- 设置店铺状态 -->
		<view style="background-color: #f0cc00;float: left;height: 26rpx;width: 26rpx;border-radius: 50%;margin: 38rpx 0 0 14rpx;"></view>
		<uni-section title="修改店铺状态">
		      <uni-data-select
		        v-model="currentStatus"
		        :localdata="statuses"
		        @change="changeStatus"
				:clear="false"
		      ></uni-data-select>
		</uni-section>
		
		<!-- 订单详情 -->
		<view style="display: flex;margin-top: 20rpx;">
			<!-- 左边栏 -->
			<view style="width: 30%;height: 700rpx;background-color: #d2d2d2;align-items: center;">
				<view v-for="(item,index) in leftData " :key="index">
					<view :class="{'left-list': index!=currentLeft, 'selected-left':index==currentLeft }"
						@click="changeLeft(index)"
					>{{leftData[index]}}</view>
				</view>
				
			</view>
			<scroll-view scroll-y="true" style="height: 700rpx; background-color: white;">
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {adminBaseUrl} from "../../config/config.js"
	export default {
		data() {
			return {
				shopId: -1,
				shopName: '',
				shopImage: '',
				shopAddress: '',
				shopPhone: '',
				shopInfo: '',
				currentStatus: 0,
				statuses:[
					{value: 2,text: '空闲中'},
					{value: 1,text: '忙碌中'},
					{value: 0,text: '休息中'},
				],
				leftData:[
					'未接单','已接单','已完成'
				],
				currentLeft: 0
			}
		},
		onShow(){
			//获取到刚刚登录的商家用户名
			let username=uni.getStorageSync('empUsername')
			//获取商家信息
			this.loadShop(username);
		},
		methods: {
			loadShop(username){
				let token = uni.getStorageSync('empToken')
				uni.request({
					url: adminBaseUrl + '/employee/getShop?username=' + username,
					method: 'GET',
					header: {
						'token': token,
					},
					success: (res) => {
						this.shopName=res.data.data.name
						this.shopImage=res.data.data.image
						this.shopAddress=res.data.data.address
						this.shopPhone=res.data.data.phone
						this.shopInfo=res.data.data.info
						this.shopId=res.data.data.id
						this.currentStatus=res.data.data.status
						uni.setStorageSync('empShopId',this.shopId)
					},
					fail: (res) => {
						
					}
				})
			},
			openShopDetail(){
				uni.navigateTo({
					url: '/pages/empShopDetail/empShopDetail',
				})
			},
			changeStatus(e){
				let token = uni.getStorageSync('empToken')
				uni.request({
					url:adminBaseUrl+'/shop/status/'+this.currentStatus+'?shopId='+this.shopId,
					method:'POST',
					header: {
						'token': token,
					},
					success: (res) => {
						if(res.data.code===1){
							uni.showToast({
								title:'修改状态成功'
							})
						}
					}
				})
			},
			changeLeft(index){
				if(index==this.currentLeft)return;
				
				this.currentLeft=index
			}
		}
	}
</script>

<style>
.left-list{
	
	border-bottom: solid #828282;
	padding: 30rpx 25rpx;
	color: black;
}
.selected-left{
	
	border-bottom: solid #828282;
	padding: 30rpx 25rpx;
	color: #edcc0d;
	background-color: #ffffff;
}
</style>
